<template>
	<view>
    <!-- 搜索栏 -->
    <view class="search-box">
        <my-search @click="haldIndex"></my-search>
    </view>
   <!-- 搜索栏结束 -->
	<view class="scroll-view-container">
	  <scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh + 'px'}">
      <block v-for="(item,index) in LieBiaoList" :key="index">
        <view @click="ClickChange(index)" :class="['left-scrpll-view-item',index === active ? 'active' : '' ]">{{item.cat_name}}</view>
      </block>
	  </scroll-view>
    <scroll-view scroll-y="true" class="rigth-scroll-view" :style="{height:wh + 'px'}" :scroll-top="scrollTop">
      <view class="cate-lv" v-for="(item1,index1) in LieBiaoList2" :key="index1">
        <view class="cate-lv2-title">
          /{{item1.cat_name}}/
        </view>
        <view class="cate-lv3-list">
          <view class="cate-lv3-item" v-for="(item2,index2) in item1.children" :key="index2" @click="gotGoodList(item2)">
            <image :src="item2.cat_icon" mode=""></image>
            <text>{{item2.cat_name}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
	</view>
	</view>
</template>

<script>
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
  // 将 badgeMix 混入到当前的页面中进行使用
  mixins: [badgeMix],
		data() {
			return {
				wh:0,
        active:0,
        LieBiaoList:[],
        // 二级分类列表
        LieBiaoList2:[],
        scrollTop:0
			}
		},
    onLoad(){
      const sysIonfo = uni.getSystemInfoSync()
      this.wh = sysIonfo.windowHeight - 50
      this.getLieBiaoList()
    },
    methods:{
        async getLieBiaoList(){
           const {data:res} = await uni.$http.get('/api/public/v1/categories')
           if(res.meta.status !== 200){
           return uni.$showMsg()
           }
           this.LieBiaoList = res.message
           this.LieBiaoList2 = res.message[0].children
         },
         ClickChange(index){
           this.active = index
           this.LieBiaoList2  = this.LieBiaoList[index].children
           this.scrollTop = this.scrollTop === 0 ? 1 : 0
         },
         gotGoodList(item){
           uni.navigateTo({
           url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
             })
         },
         haldIndex(){
           uni.navigateTo({
             url:'/subpkg/search/search'
           })
         }
    }
	}
</script>

<style lang="scss">
.scroll-view-container {
  display: flex;
  .left-scroll-view {
    width: 120px;
  }
  .left-scrpll-view-item {
    background-color: #f7f7f7;
    line-height: 60px;
    text-align: center;
    font-size: 12px;
   &.active{
background-color: #FFFFFF !important;
     position: relative;
     &::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 0;
       display: block;
       transform: translateY(-50%);
       width: 3px;
       height: 30px;
       background-color: #C00000;
     }
   }
  }
}
.cate-lv2-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}
.cate-lv3-list {
  display: flex;
  flex-wrap: wrap;
  .cate-lv3-item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  image {
    width: 60px;
    height: 60px;
  }
  text {
    font-size: 12px;
  }
}
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
  }
</style>
